前面實作過一個簡易的代辦清單,
但目前的待辦清單最新的資料會在列表的後面,但現在使用者在陣列方法中可以使用 reverse()
方法反轉陣列的順序,但 firebase 只能用物件的方式呈現,那怎麼反轉呢?
既然物件沒有反轉,那就使用 forEach 把資料新增到陣列中吧!
來改寫一下隨時監聽內的寫法。
todo.on("value", function (snapshot) {
let str = "";
let data = [];
snapshot.forEach((item) => {
data.push(item.val());
});
data.reverse(); //* 反轉陣列資料
for (let item in data) {
str += `<li>${data[item].content}</li>`; //* 累加列表
}
list.innerHTML = str;
memo.value = ""; //* 按下送出後,清空 input 的值
});
說明:
data
改為空陣列。snapshot
參數使用 forEach()
將資料一筆一筆新增到陣列中。data
陣列的資料使用 reverse()
方法反轉排序。content
的值,故使用 for...in
取得資料內容,並渲染在網頁上。Demo: https://codepen.io/hnzxewqw/embed/eYreLyj